<template>
	<el-container>
		<el-main class="nopadding" style="overflow-x: hidden;">
			<el-card shadow="never">	
				<el-table ref="nodeTable" :data="sealInfo" stripe border>
						<el-table-column label="系统序号" width="100" prop="sealId"> </el-table-column>
						<el-table-column label="地区" width="120"  prop="place"></el-table-column>
						<el-table-column label="工厂/部门" width="180" prop="factory"></el-table-column>
						<!-- <el-table-column label="部门" width="180" prop="department"></el-table-column> -->
						<el-table-column label="印章名称" width="180" prop="sealName"></el-table-column>
						<el-table-column label="物料编号" width="120" prop="materialCode"></el-table-column>
						<el-table-column label="规格" width="120" prop="specifications"></el-table-column>
						<el-table-column label="颜色" width="100" prop="sealColor"></el-table-column>
						<el-table-column label="数量" width="100" prop="sealCount"></el-table-column>
						<el-table-column label="印章类型" width="100" prop="sealType"></el-table-column>
						<el-table-column label="印章图样"  min-width="180" prop="sealPattern" fixed="right">
							<template #default="scope">
								<bydWaterMark ref="wm" text="印章管理系统" subtext="印章图样">
									<el-image @click="handleLoad"
										style="width: 120px; height: 100px" 
										:preview-teleported="true" 
										:src="scope.row.sealPattern" 
										:fit="fit" 
										:preview-src-list="[scope.row.sealPattern]">
									</el-image>
								</bydWaterMark>
							</template>
						</el-table-column>
					</el-table>
				<el-form ref="keepForm" :rules="rules" :model="filingInfo" label-width="100px" style="margin-top: 20px;">
					<el-row :gutter="10">
						<el-col :span="20">
							<el-form-item label="用途" size="default" prop="effect">
								<el-input v-model.trim="filingInfo.effect" type="textarea" placeholder="请输入印章用途"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="10">
						<el-col :span="10">
							<el-form-item label="刻制日期" prop="engraveDate">
								<el-date-picker type="date" placeholder="选择刻制日期" value-format="YYYY-MM-DD" v-model="filingInfo.engraveDate" style="width:100%"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="刻制人" size="default" prop="engravePeople"> 
								<el-input v-model="filingInfo.engravePeople" readonly>
									<template #append>
										<el-button @click="engravePeopleSearch">查询</el-button>
									</template>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="10">
						<el-col :span="18">
							<el-form-item label="监印人" size="default">
								<byd-form-table	v-model="keepPeople" drag-sort placeholder="请点击左上角加号(+)添加监印人信息" style="width: 100%"> 
									<el-table-column label="监印人" width="200" prop="keepNumber"> 
										<template #default="scope">
											<el-input  v-model.trim="scope.row.keepNumber" placeholder="请添加监印人" readonly></el-input>
										</template>
									</el-table-column>
									<el-table-column label="数量" width="150" prop="keepCount">
										<template #default="scope">
											<el-input-number v-model="scope.row.keepCount" :min="1" style="width: 80px" size="small" />
										</template>
									</el-table-column>
									<el-table-column label="备注" width="200" prop="keepRemark">
										<template #default="scope">
											<el-input  v-model.trim="scope.row.keepRemark" placeholder="没有则填无"></el-input>
										</template>
									</el-table-column>
									<el-table-column label="操作" align="center" min-width="150">
										<template #default="scope">
											<el-button type="text" size="default" @click="addFilingPeople(scope.row)"><el-icon><ZoomIn /></el-icon>添加</el-button>
										</template>
									</el-table-column>
								</byd-form-table>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="10">
						<el-col :span="10">
							<el-form-item label="备案人" size="default" prop="filingPeople">
								<el-input v-model="filingInfo.filingPeople" readonly></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="10">
							<el-form-item label="备注" size="default" prop="remark">
								<el-input v-model="filingInfo.remark"></el-input>
							</el-form-item>
						</el-col> -->
					</el-row>
					<el-form-item>
						<el-button @click="resetForm">重置</el-button>
						<el-button :loading="submitBtnLoad" type="primary" @click="onSubmit('keepForm')">保存</el-button>
					</el-form-item>
				</el-form>
				<peopleSearch title="刻制人员查询" v-model="engravePeopleSearchView" @selectChange="engravePeopleChecked"/>
				<peopleSearch title="监印人员查询" v-model="keepPeopleView" @selectChange="keepPeopleChecked"/>
			</el-card>
		</el-main>
	</el-container>
</template>

<script>
	import { Check,ZoomIn } from '@element-plus/icons-vue'
	import peopleSearch from '@/views/components/peopleSearch.vue'
	import { create } from '@/utils/watermark'
	export default {
		name: 'engraveList',
		components:{Check,ZoomIn,peopleSearch},
		props:{
			sealInfo: {
				type: Object,
			},
		},
		data() {
			return {
				submitBtnLoad:false,
				filingInfo: {
					effect : "",
					engraveDate : "",
					engravePeople : "",
					filingPeople : "",
				},
				keepPeople : [],
				engravePeopleSearchView : false,
				rules:{
					effect:[
						{required:true,message:'请输入印章用途',trigger:'blur'}
					],
					engraveDate:[
						{required:true,message:'请输入刻制日期',trigger:'blur'}
					],
					engravePeople:[
						{required:true,message:'请选择刻制人',trigger:['change', 'blur']}
					],
					filingPeople:[
						{required:true,message:'请输入备案人',trigger:'blur'}
					],
				},
				keepPeopleView : false,
			}
		},
		mounted(){
			const applyPeopeTime = this.sealInfo[0].applyPeople.split("-");
			this.filingInfo.engravePeople = applyPeopeTime[1] + "-" + applyPeopeTime[0];
			let user = this.$tool.data.get("USER_INFO");
			this.filingInfo.filingPeople = user.jobnumber + "-" + user.username
		},
		methods: {
			//添加水印
			handleLoad() {
                setTimeout(() => {
                    const img = document.querySelector('.el-image-viewer__canvas');
                    var userInfo = this.$tool.data.get("USER_INFO");
                    create(img, { text: '印章管理系统',subtext : userInfo.username + userInfo.jobnumber })
                }, 100)
            },
			//查找审批人
			engravePeopleSearch(){
				this.engravePeopleSearchView = true;
			},
			engravePeopleChecked(row = {}){
				const { jobnumber,username } = row;
				console.log(jobnumber + "-" + username)
				this.filingInfo.engravePeople = jobnumber + "-" + username;
			},
			//添加监印人
			addFilingPeople(data){
				this._row = data;
				this.keepPeopleView = true;
			},
			keepPeopleChecked(row = {}){
				const _row = this._row;
				const { jobnumber,username } = row;
				const checkedPeopleTime = jobnumber + "-" + username;
				if (_row && row) {
					_row.keepNumber = checkedPeopleTime;
				}
			},
			//重置表单
			resetForm() {
				this.filingInfo.effect = "";
				this.filingInfo.engraveDate = "";
				this.filingInfo.engravePeople = "";
				this.keepPeople = [];
				const applyPeopeTime = this.sealInfo[0].applyPeople.split("-");
				this.filingInfo.engravePeople = applyPeopeTime[1] + "-" + applyPeopeTime[0];
			},
			//提交表单
			onSubmit(formName) {
				this.submitBtnLoad = true;
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						let finish = true;
						if(this.keepPeople.length == 0){
							this.$message.error("请添加监印人信息");
							finish = false;
						}else{
							var keepPeopleNumber = new Set;
							var notComplete = new Set;
							var keepCount = 0;
							this.keepPeople.forEach((item, id) => {
								if(JSON.stringify(item) == "{}"){
									finish = false;
									notComplete.add(id + 1);
								}else{
									const valueList = Object.values(item);
									console.log(valueList)
									if(valueList.length != 3){
										finish = false;
										notComplete.add(id + 1);
									}else{
										keepCount += valueList[0];
										keepPeopleNumber.add(valueList[1])
										valueList.forEach(function(i){
											if(!i){
												finish = false;
												notComplete.add(id + 1);
												return false;
											}
										})
									}
								}
							})
						}
						if(!finish){
							this.submitBtnLoad = false;
							if(notComplete && notComplete.size > 0){
								let permission = Array.from(notComplete).join(",");
								this.$message.error("请补全第" + permission + "行监印信息")
							}
							return false;
						}else if(keepPeopleNumber.size != this.keepPeople.length){
							this.submitBtnLoad = false;
							this.$message.error("监印人不可重复");
							return false;
						}else if(this.sealInfo[0].sealCount != keepCount){
							this.submitBtnLoad = false;
							this.$message.error("监印数量与印章数量不符!");
							return false;
						}else{//提交后端
							var filingResult = await this.$api.engrave.sealFiling.post({
								...this.filingInfo,
								keepPeopleInfo: JSON.stringify(this.keepPeople),
								sealId : this.sealInfo[0].sealId,
								factory : this.sealInfo[0].factory,
							})
							if(filingResult.respCode == "0000"){
								this.$message({
									message: filingResult.respDesc,
    								type: 'success',
								})
								setTimeout(() => {
									location.reload();
								},1500)
							}else{
								this.submitBtnLoad = false;
								this.$message.error(filingResult.respDesc)
							}
						}
					} else {
						console.log('error submit!!');
						this.submitBtnLoad = false;
						return false;
					}
				});
			},
		}
	}
</script>

<style>
</style>
